<template>
  <div class="self-service-order">
    <!-- 导航栏 -->
    <van-nav-bar 
      title="自助开单" 
      left-arrow 
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="ellipsis" size="20" />
        <van-icon name="question-o" size="20" style="margin-left: 12px" />
      </template>
    </van-nav-bar>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <div class="notice-container">
        <h2 class="notice-title">自助开单须知</h2>
        
        <div class="notice-content">
          <p class="notice-item">
            1、便民门诊就诊须知先挂号、再就诊。实名就诊，病员信息与就诊卡不符，不能开药开单。
          </p>
          
          <p class="notice-item">
            2、便民门诊可开具临床医疗常规用药，如常规中成药、常规西药。根据药品管理规定，<span class="highlight">便民门诊不得开具以下药品：（1）血液制品如人血白蛋白、抗蛇毒血清、破伤风抗毒素针、破伤风免疫球蛋白、人乙肝免疫球蛋白；（2）麻醉药品、精神药品、毒性药品、抗菌药物、高警示药品；（3）各类静脉输液用药。</span>如需开上述药品，请到相应专科就诊由专科医生评估后开具。
          </p>
          
          <p class="notice-item">
            3、根据《处方管理办法》，处方开具当日有效；处方一般不得超过7日用量；对于某些慢性病、老年病或特殊情况，处方用量可适当延长，便民门诊不得开具诊断证明、病假、体检、检查结果的解释，不开具诊断证明书。
          </p>
          
          <p class="notice-item">
            4、代开药需持开药患者本人和代开药人身份证件，并出示患者过往专科开药病历。
          </p>
          
          <p class="notice-item">
            5、便民门诊仅开具以体检为目的的常规临床医疗化验检查申请单，如血、尿、便常规、乙肝二系、血生化、心电图、B 超、X 片、CT 等，其他特殊大型检查请到专科开具。
          </p>
          
          <p class="notice-item">
            6、工作时间：周一到周五：07：45-12：00, 12：45-16：30, 8周六/周日：08:00-12:00节假日以医院公告为准。
          </p>
          
          <p class="notice-warning">
            注意:孕妇请在执业中医师指导下使用; 初诊患者和非慢性疾病的复诊患者都不建议在便民门诊就医开药，以免耽误病情。
          </p>
        </div>
      </div>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom-button">
      <van-button type="primary" block round @click="onAgree">
        我已阅读并同意须知
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

// 返回上一页
const onClickLeft = () => {
  router.back()
}

// 同意须知，进入下一步
const onAgree = () => {
  // 跳转到院区选择页面
  router.push('/create-order/campus')
}
</script>

<style scoped>
.self-service-order {
  min-height: 100vh;
  background-color: #f7f8fa;
  display: flex;
  flex-direction: column;
}

.content-wrapper {
  flex: 1;
  overflow-y: auto;
  padding-bottom: 80px;
}

.notice-container {
  background-color: #ffffff;
  padding: 20px 16px;
  margin: 12px;
  border-radius: 8px;
}

.notice-title {
  font-size: 20px;
  font-weight: 600;
  color: #323233;
  margin: 0 0 20px 0;
}

.notice-content {
  font-size: 15px;
  line-height: 1.8;
  color: #323233;
}

.notice-item {
  margin-bottom: 16px;
  text-align: justify;
}

.highlight {
  color: #ee0a24;
  font-weight: 500;
}

.notice-warning {
  color: #ee0a24;
  font-weight: 500;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebedf0;
}

.bottom-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px 16px 20px;
  background-color: #ffffff;
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.bottom-button .van-button {
  height: 48px;
  font-size: 16px;
  font-weight: 500;
}

/* 适配安全区域 */
@supports (bottom: env(safe-area-inset-bottom)) {
  .bottom-button {
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
}
</style>

